<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://localhost:8080/css/label-pink.css" >
</head>


<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#next").click(function () {
            var page = parseInt($("#pages").html());
            var count = parseInt($("#count").html());
            if(page == count){
                return;
            }
            page = page +1;
            location.href = "/customerOrder/findAll?page="+page;
        });
        $("#back").click(function () {
            var page = parseInt($("#pages").html());
            if(page == 1){
                return;
            }
            page = page -1;
            location.href = "/customerOrder/findAll?page="+page;
        });
        $("#home").click(function () {
            location.href = "/customerOrder/findAll?page=1";
        });
        $("#end").click(function () {
            var count = parseInt($("#count").html());
            location.href = "/customerOrder/findAll?page="+count;
        });
    })
</script>

<body>
    <a href="/toHome">返回首页</a>
    总页码为：<p id="count" th:text="${count}"></p>
    当前页码为：<p id="pages" th:text="${page}"></p>
    <button id="home">首页</button>
    <button id="back">上一页</button>
    <button id="next">下一页</button>
    <button id="end">尾页</button>
    <table class="table">
        <tr>
            <th>创建时间</th>
            <th>出发地</th>
            <th>目的地</th>
            <th>预估费用</th>
            <th>状态</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        <tr th:each="order:${orderList}">
            <td th:text="${#dates.format(order.getCustomerOrderCreateTime(),'yyyy-MM-dd hh:mm:ss')}"></td>
            <td th:text="${order.getCustomerOrderStartPlace()}"></td>
            <td th:text="${order.getCustomerOrderEndPlace()}"></td>
            <td th:text="${order.getCustomerOrderPrice()}"></td>

            <td>
                <div th:switch="${order.getCustomerOrderStatus()}">
                    <p th:case="1">等待接单</p>
                    <p th:case="2">已接单</p>
                    <p th:case="3">订单已完成</p>
                    <p th:case="4">订单已付款</p>
                    <p th:case="5">订单已取消</p>
                </div>
            </td>
            <td th:text="${order.getCustomerOrderRemakes()}"></td>
            <td>
                <div th:switch="${order.getCustomerOrderStatus()}">
                    <a th:case="1" th:href="@{'/customerOrder/cancel?id='+${order.getCustomerOrderId()}}">取消订单</a>
                    <a th:case="2" th:href="@{'/customerOrder/cancel?id='+${order.getCustomerOrderId()}}">取消订单</a>
                    <a th:case="1" th:href="@{'/receivingOrder/create?driversId=1&customerOrderId='+${order.getCustomerOrderId()}}">模拟司机接单</a>
                    <a th:case="3" th:href="@{'/meter/mypay?price='+${order.getCustomerOrderPrice()}+'&customerOrderId='+${order.getCustomerOrderId()}}">去付款</a>
                    <a th:case="4" th:href="@{'/customerOrder/message?customerOrderId='+${order.getCustomerOrderId()}}">查看详情</a>
                </div>
                <a th:if="${order.getCustomerOrderStatus()}==1 " th:href="@{'/receivingOrder/create?driversId=1&customerOrderId='+${order.getCustomerOrderId()}}">模拟司机接单</a>
            </td>
        </tr>
    </table>
</body>
</html>
